<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from "three";
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";
import { OrbitControls } from "../common/tool/OrbitControls";

export default {
  data() {
    return {
      /**场景 */
      scene: null,
      /**相机 */
      camera: null,
      /**渲染 */
      renderer: null,
      /**控制器 */
      controls: null,
      /**屋顶 */
      roof: null, 
      requestId: null,
      /**容器 */
      container: null
    };
  },
  methods: {
    /**初始化 */
    initScene() {
      this.scene = new THREE.Scene();
      // 环境光：
      const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
      this.scene.add(ambientLight);
      // 辅助坐标系：
      var axisHelper = new THREE.AxisHelper(15);
      this.scene.add(axisHelper);
      //网格辅助线：
      var helper = new THREE.GridHelper(1080, 800, 0xCD3700, 0x4A4A4A);
      this.scene.add(helper);
    },
    initCamera() {
      const aspect = window.innerWidth / 1080; //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
      // 透视投影相机：
      this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);
      this.camera.position.set(15, 25, 20);
      this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 让相机指向原点
      // 点光源：
      const pointLight = new THREE.PointLight(0xffffff, 0.8);
      this.camera.add(pointLight);
      this.scene.add(this.camera);
    },
    //渲染器render初始化:
    initRenderer() {
      
      this.renderer = new THREE.WebGLRenderer({ 
          antialias: true,//开启反锯齿
          // alpha: true //设置背景色透明
        });
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, 1080); //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight

      this.container = document.getElementById("container");
      this.container.appendChild(this.renderer.domElement);
    },
    initControl() {
      // 鼠标控制
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.target = new THREE.Vector3(0, 0, 0);
      // 视角最小距离
      this.controls.minDistance = 12;
      // 视角最远距离
      this.controls.maxDistance = 100;
      // 最大角度
      this.controls.maxPolarAngle = Math.PI/4;
    },
    //渲染:
    animate() {
      this.renderer.render(this.scene, this.camera);
      this.requestId = requestAnimationFrame(this.animate);
    },
    init() {
      this.initScene();
      this.initCamera();
      this.initRenderer();
      this.initControl();
    },
    /**加载模型 */
    loadPlant() {
      //放置绿色立方体到厂房里：
      // var geometry = new THREE.BoxGeometry( 1, 1, 1 );
      // var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
      // var cube = new THREE.Mesh( geometry, material );
      // cube.position.set(-10, 1 ,-2);
      // this.scene.add( cube );

      let that = this;
      let objLoader = new OBJLoader();//obj模型加载器
      let mtlLoader = new MTLLoader();//材质文件加载器
      mtlLoader.load("/static/models/厂房无盖.mtl", function(materials) {
        // materials.preload();
        objLoader.setMaterials(materials);//obj模型会和MaterialCreator包含的材质对应起来
        objLoader.load(
          "/static/models/厂房无盖.obj",
          function(obj) {
            obj.position.set(10, 0, -6);//模型摆放的位置
            obj.scale.set(0.01, 0.01, 0.01);//模型放大或缩小的系数
            that.scene.add(obj);//将模型加入场景中
          },
          // called while loading is progressing
          function(xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          },
          // called when loading has errors
          function(error) {
            console.log("An error happened");
          }
        );
      });
    },
    loadRoof() {
      let that = this;
      let objLoader = new OBJLoader();
      objLoader.load(
        "/static/models/厂房盖子.obj",
        function(obj) {
          obj.position.set(10, 0, -6);
          obj.scale.set(0.01, 0.01, 0.01);
          that.scene.add(obj);
          that.roof = obj;
        },
        // called while loading is progressing
        function(xhr) {
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        // called when loading has errors
        function(error) {
          console.log("An error happened");
        }
      );
    },
    onResize() {
      this.camera.aspect = window.innerWidth / 1080;  //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, 1080);  //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
    }
  },
  mounted() {
    this.init();
    this.loadPlant();
    this.loadRoof(); //厂房盖子
    this.animate();
    document.getElementsByTagName("canvas")[0].style.verticalAlign = "bottom"; //解决canvas底部留白问题
    window.addEventListener("resize", this.onResize, false);
  },
  destroyed() {
    cancelAnimationFrame(this.requestId);
    this.scene = null;
    this.camera = null;
    this.renderer = null;
    this.controls = null;
    window.removeEventListener("resize", this.onResize, false);
  }
};
</script>

<style scoped>
#container {
  height: 1080px;
}
</style>